<script lang="ts" setup>
import { ElButton, ElInput, ElAvatar } from "element-plus";
import ApiMerchant from "@/api/merchant";
import { useRouter } from "vue-router";
import {
  batchGetSourceUrls,
  dispatchAppTask,
} from "@/components/task/tastEvent";
import { h, unref } from "vue";
import useProTable from "@/hooks/useProTable";

// const singleUrl = import.meta.env.VITE_APP_SINGLE || "";

const tableColumns = [
  { label: "序号", type: "index", width: 65 },
  {
    label: "Logo",
    width: 110,
    slot: ({ row }: any) =>
      h(ElAvatar, {
        src: row.merchant_logo_png + "?x-oss-process=image/resize,p_20",
      }),
  },
  { label: "品牌名", prop: "merchant_title", minWidth: 160 },
  // {
  //   label: "类别", slot: "merchant_type", minWidth: 124,

  //   // render: (row: any) => category.map.get?.(row.merchant_type)
  // },
  // {
  //   label: "地址",
  //   minWidth: 160,
  //   render: (row: TMerchant) => row.province + row.city + row.district,
  // },
  // {
  //   label: "营业时间",
  //   prop: "merchant_time",
  //   width: 120,
  //   // sortable: "custom",
  // },
  // {
  //   label: "门店数量",
  //   prop: "merchant_size",
  //   width: 100,
  // },
  { label: "联系人", prop: "contact_name", minWidth: 120 },
  { label: "联系电话", prop: "contact_phone", minWidth: 130 },
  // { label: "微信", prop: "contact_wechat", minWidth: 130 },
  // { label: "邮箱", prop: "contact_email", minWidth: 200 },
  { label: "职位", prop: "contact_position", minWidth: 120 },
  // { label: "备用联系人", prop: "active_time", minWidth: 120 },
  { label: "入驻时间", prop: "create_time", minWidth: 120 },
  // { label: "商户收款码", slot: "merchant_qrcode", Width: 160 },
  {
    label: "操作",

    width: 150,
    fixed: "right",

    slot: ({ row }: any) => [
      h(
        ElButton,
        {
          link: true,
          type: "primary",
          onClick: () => router.push(`/merchant/${row.id}`),
        },
        "详情"
      ),
      h(
        ElButton,
        {
          link: true,
          onClick: () => router.push(`/merchant/${row.id}/staff/list`),
        },
        "职工管理"
      ),
    ],
  },
];

const router = useRouter();

const [ProTable, { tableApi }] = useProTable({
  fetchUrl: ApiMerchant.merchantList,
  fetchOptions: { routerQuery: true },
  tableOptions: { columns: tableColumns },
  formOptions: {
    formItems: [
      {
        label: "品牌名称",
        children: {
          type: ElInput,
          field: "merchant_title",
          placeholder: "请输入",
        },
      },
      {
        label: "职工电话",
        children: {
          type: ElInput,
          field: "staff_mobile",
          placeholder: "请输入",
        },
      },
    ],
  },
});

const sourceUrlKeys = [
  "business_license",
  "merchant_img",
  "merchant_logo_png",
  "merchant_logo_ai",
  "product_img",
];

/**
 * 下来本页数据资源
 */
const downloadSource = () => {
  unref(tableApi.list).forEach((item: any) => {
    dispatchAppTask({
      title: `【${item.merchant_title}】资源文件`,
      data: batchGetSourceUrls(item, sourceUrlKeys),
    });
  });
};
</script>

<template>
  <ProTable>
    <template #tool-left>
      <ElButton type="primary" @click="downloadSource"
        >下载本页商家资源</ElButton
      >
    </template>
  </ProTable>

  <!-- <ProTableScope>
    <template #merchant_qrcode="{ row }">
      <QrcodeVue
        :value="singleUrl + '/#/pages/merchantpay/index?id=' + row.id"
        type="image/png"
        :color="{ dark: '#000000', light: false }"
        :size="120"
      ></QrcodeVue>
    </template>

    <template #operate="{ row }"> </template>
  </ProTableScope> -->
</template>
